<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="开始时间" prop="beginDate">
        <el-date-picker clearable size="small" style="width: 200px"
                        v-model="queryParams.beginDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择活动开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker clearable size="small" style="width: 200px"
                        v-model="queryParams.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择活动结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择活动状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属商家" prop="merchantId">
        <el-input
          v-model="queryParams.merchantId"
          placeholder="请输入所属商家"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['merchant:activity:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['merchant:activity:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['merchant:activity:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['merchant:activity:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="activityList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="商家" align="center" prop="merchantName"/>
      <el-table-column label="主题" align="center" prop="title"/>
      <el-table-column label="开始时间" align="center" prop="beginDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beginDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="每人可参与次数" align="center" prop="joinTimes">
        <template slot-scope="scope">
          <span v-if="scope.row.joinTimes==0">不限次</span>
          <span v-if="scope.row.joinTimes!=0">{{scope.row.joinTimes}}次</span>
        </template>
      </el-table-column>
      <el-table-column label="发送时间" align="center" prop="laterSend">
        <template slot-scope="scope">
          <span v-if="scope.row.laterSend==0">实时发送</span>
          <span v-if="scope.row.laterSend!=0">{{scope.row.laterSend}}小时后</span>
        </template>
      </el-table-column>
      <!--  <el-table-column label="主图" align="center" prop="imgUrl" />-->
      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat">
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="laterSend">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!--   <el-table-column label="宣传视频" align="center" prop="videoUrl" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status!=2"
                     size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button v-if="scope.row.status!=2"
                     size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
          >删除
          </el-button>
          <el-button v-if="scope.row.status==1 || scope.row.status==3"
                     size="mini"
                     type="text"
                     icon="el-icon-share"
                     @click="handleOnline(scope.row)"
          >上线
          </el-button>
          <el-button v-if="scope.row.status==2"
                     size="mini"
                     type="text"
                     icon="el-icon-full-screen"
                     @click="showActivityQrcode(scope.row)">二维码
          </el-button>
          <el-button v-if="scope.row.status==2"
                     size="mini"
                     type="text"
                     icon="el-icon-sort-down"
                     @click="handleOffline(scope.row)"
          >下线
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改优惠券活动对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-steps :active="active" :finish-status="process">
        <el-step v-for="(item,index) in stepList" :title="item.title" :key="index"
                 @click.native="stepChange(index+1)"></el-step>
      </el-steps>
      <el-form v-loading="loading" element-loading-text="加速上传中" ref="form" :model="form" :rules="rules"
               label-width="100px" style="margin-top:20px;">
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="active==1" label="所属商家" prop="merchantId">
              <el-select v-model="form.merchantId" placeholder="请选择所属商家" @change="getCouponList">
                <el-option v-for="merchant in merchantList"
                           :key="merchant.deptId"
                           :label="merchant.deptName"
                           :value="merchant.deptId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="active==1" label="活动主题" prop="title">
              <el-input v-model="form.title" placeholder="请输入活动主题"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="active==1" label="活动时间" prop="beginDate">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择活动开始时间" v-model="form.beginDate"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择活动结束时间" v-model="form.endDate"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item v-if="active==1" label="活动描述" prop="description">
          <el-input type="textarea" v-model="form.description" :autosize="{minRows: 4, maxRows: 4}"
                    placeholder="请输入活动描述"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item v-if="active==1" label="优惠券" prop="couponId">
              <el-select v-model="form.couponId" placeholder="请选择优惠券">
                <el-option v-for="coupon in couponList"
                           :key="coupon.id"
                           :label="coupon.title"
                           :value="coupon.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="active==1" label="每人参与" prop="joinTimes">
              <el-tooltip class="item" effect="dark" content="每个人可参与活动的次数：0为不限次" placement="top-start">
                <el-input v-model="form.joinTimes" type="number">
                  <template slot="append">次</template>
                </el-input>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <!--第2步-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="active==2" label="@openid" prop="">
              <el-input v-model="merDouyin.openId" :style="{width:'60%'}" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="active==2" label="@昵称" prop="">
              <el-input v-model="merDouyin.nickname" :style="{width:'60%'}" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--POI信息-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="active==2" label="poi_id" prop="">
              <el-input v-model="merDouyin.poiId" :style="{width:'60%'}" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="active==2" label="地址" prop="">
              <el-input v-model="merDouyin.poiName" :style="{width:'60%'}" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--小程序相关开始-->
        <!-- <el-row>
           <el-col :span="12">
             <el-form-item  v-if="active==2" label="小程序id" prop="" >
               <el-input v-model="form.microAppId" :style="{width:'60%'}"  ></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item  v-if="active==2" label="小程序标题" prop="" >
               <el-input v-model="form.microAppTitle" :style="{width:'60%'}"  ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
             <el-form-item  v-if="active==2" label="吊起小程序时的url" prop="" >
               <el-input v-model="form.microAppUrl"  ></el-input>
             </el-form-item>
           </el-col>
         </el-row>-->
        <!--小程序相关结束-->
        <el-form-item v-if="active==2"
                      v-for="(douyinTitle, index) in douyinTitles"
                      :label="'话题' + (index+1)"
                      :key="douyinTitle.key" prop="">
          <el-input v-model="douyinTitle.value" :style="{width:'60%'}"></el-input>
          <el-button @click.prevent="removeDouyinTitle(douyinTitle)">删除</el-button>
        </el-form-item>
        <div v-if="active==2" style="text-align: center">
          <el-button type="success" @click="addDouyinTitle">新增话题</el-button>
        </div>

        <!--选择视频-->
        <el-form-item v-if="active==3" label="视频标题" prop="">
          <el-input v-model="form.videoTitle"></el-input>
        </el-form-item>
        <!-- <el-form-item v-if="active==3" label="发送时间" prop="laterSend">
           <el-tooltip class="item" effect="dark" content="N小时后发送视频：以小时为单位，0为不延迟，设置后可避免用户领券后立马删除已转发的视频" placement="top-start">
             <el-input v-model="form.laterSend" type="number">
               <template slot="append">小时后发送</template>
             </el-input>
           </el-tooltip>
         </el-form-item>-->
       <!-- <el-form-item v-if="active==3" label="选择方式" prop="">
          <el-radio v-model="form.videoSource" :label="0" @change="selectVideo">按分组选择</el-radio>
          <el-radio v-model="form.videoSource" :label="1" @change="selectVideo" disabled>按文件选择</el-radio>
        </el-form-item>
        <el-form-item v-if="active==3" label="选择视频" prop="">
          <el-select v-model="form.resourceGroupIds" multiple>
            <el-option v-for="resourceGroup in resourceGroupList"
                       :key="resourceGroup.id"
                       :label="resourceGroup.groupName"
                       :value="resourceGroup.id"/>
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" ref='stepBtn' style="margin-top: 12px;" @click="next">下一步</el-button>
        <el-button v-if="active==3" type="primary" @click="submitForm">提 交</el-button>
        <el-button v-if="active==3" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--抖音授权对话框-->
    <el-dialog title="用抖音进行扫码" :visible.sync="dialogVisible" width="20%">
      <div id="qrcode"></div>
    </el-dialog>

    <!--活动二维码对话框-->
    <el-dialog title="保存二维码，扫码加入活动" :visible.sync="activityQrcodeDialogVisible" width="450px">
      <div id="activityQrcode" style="width: 400px; text-align: center; margin-left: auto;margin-right: auto;"></div>
    </el-dialog>

  </div>
</template>

<script>
    import {listDept} from "@/api/system/dept";
    import {listCoupon} from "@/api/merchant/coupon";
    import {upload} from "@/api/upload";
    import {listResourcegroup} from "@/api/merchant/resourcegroup";
    import {
        listActivity,
        getActivity,
        delActivity,
        addActivity,
        updateActivity,
        exportActivity,
        uploadVideo,
        uploadImg,
        offlineActivity,
        onlineActivity
    } from "@/api/merchant/activity";
    import {getDouyin} from '@/api/merchant/douyin';
    import QRCode from 'qrcodejs2';
    import {getConfigKey} from '@/api/system/config';

    export default {
        name: "Activity",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 优惠券活动表格数据
                activityList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    beginDate: null,
                    endDate: null,
                    status: null,
                    merchantId: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    title: [
                        {required: true, message: "活动主题不能为空", trigger: "blur"}
                    ],
                    description: [
                        {required: true, message: "活动描述不能为空", trigger: "blur"}
                    ],
                    beginDate: [
                        {required: true, message: "活动开始时间不能为空", trigger: "blur"}
                    ],
                    endDate: [
                        {required: true, message: "活动结束时间不能为空", trigger: "blur"}
                    ],
                    videoUrl: [
                        {required: true, message: "活动宣传视频不能为空", trigger: "blur"}
                    ],
                    merchantId: [
                        {required: true, message: "所属商家不能为空", trigger: "change"}
                    ],
                    couponId: [
                        {required: true, message: "优惠券不能为空", trigger: "blur"}
                    ],
                    videoTitle: [
                        {required: true, message: "视频标题不能为空", trigger: "blur"}
                    ],
                    actityType: [
                        {required: true, message: "活动类型不能为空", trigger: "change"}
                    ],
                },
                active: 1,
                process: "process",
                stepList: [{
                    title: '基本参数',
                }, {
                    title: '抖音参数',
                }, {
                    title: '配置视频',
                }],
                // 商户表格数据
                merchantList: [],
                videoUrlAction: '/merchant/merchant/uploadVideo',
                videoUrlfileList: [],
                videoFlag: false,
                loading: false,
                couponList: [],
                douyinTitles: [{
                    value: ''
                }],
                resourceGroupList: [],
                //抖音授权对话框
                dialogVisible: false,
                statusOptions: [],
                activityQrcodeDialogVisible: false,
                activityTypeOptions: [],
                activityRedirectTypeOptions: [],
                merDouyin: null
            };
        },
        created() {
            this.getList();
            this.getDicts("activity_status").then(response => {
                this.statusOptions = response.data;
            });
            //活动模式
            this.getDicts("activity_type").then(response => {
                this.activityTypeOptions = response.data;
            });
            //活动结束后的跳转方式
            this.getDicts("activity_redirect_type").then(response => {
                this.activityRedirectTypeOptions = response.data;
            });
            //查询商户抖音信息
            this.getMerDouyin();
        },
        methods: {
            // 操作日志状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            //查询商家抖音信息
            getMerDouyin() {
                if (this.form.merchantId != null && this.form.merchantId != '' && this.form.merchantId != undefined) {
                    this.loading = true;
                    getDouyin(this.form.merchantId).then(response => {
                        this.loading = false;
                        if (response.data == null || response.data.id == null || response.data.id == undefined) {
                            this.msgError("请商户在【商户管理】-【抖音授权】进行扫码授权");
                            return false;
                        } else {//显示商家已经配置好的抖音信息
                            this.merDouyin = response.data;
                        }
                    });
                }
            },
            //选择视频
            selectVideo(label) {
                if (label == 0) {//查询资源分组
                    this.loading = true;
                    listResourcegroup().then(response => {
                        this.resourceGroupList = response.rows;
                        this.loading = false;
                    });
                }
                if (label == 1) {//查询单个视频

                }
            },
            //添加抖音话题
            addDouyinTitle() {
                this.douyinTitles.push({
                    value: '',
                    key: Date.now()
                });
            },
            //删除抖音话题
            removeDouyinTitle(item) {
                var index = this.douyinTitles.indexOf(item)
                if (index !== -1) {
                    this.douyinTitles.splice(index, 1)
                }
            },
            //下一步按钮
            next() {
                //验证表单
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.process = "success";
                    } else {
                        this.process = "error";
                        this.active = this.active - 1;
                    }
                });
                if (this.active++ > 2) this.active = 1;
                if (this.active == 2) {
                    //查询商家抖音信息
                    this.getMerDouyin();
                }
                if (this.active == 3) {
                    this.$refs.stepBtn.$el.innerText = '上一步';
                } else {
                    this.$refs.stepBtn.$el.innerText = '下一步';
                }
            },
            // 步骤条上一步
            stepChange(current) {
                if (current < this.active) {
                    this.active = current
                }
            },
            /** 查询商户列表 */
            getMerchantList() {
                this.loading = true;
                listDept({deptType: 2}).then(response => {
                    this.merchantList = response.data;
                    this.loading = false;
                });
            },
            /**根据商家查询优惠券*/
            getCouponList(value) {
                this.form.couponId = '';
                this.loading = true;
                this.queryParams.merchantId = value;
                listCoupon(this.queryParams).then(response => {
                    this.couponList = response.rows;
                    this.loading = false;
                });
            },
            // 覆盖默认的上传行为
            requestUpload(params) {
                var that = this;
                that.loading = true;
                const _file = params.file;
                let formData = new FormData();
                formData.append("file", _file);
                upload(formData).then(response => {
//          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
                    this.form.videoUrl = response.url;
                    this.msgSuccess("上传成功");
                    that.loading = false;
                });
            },
            // 覆盖默认的上传行为
            requestImgUpload(params) {
                const _file = params.file;
                let formData = new FormData();
                formData.append("file", _file);
                upload(formData).then(response => {
//          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
                    this.form.imgUrl = response.url;
                    this.msgSuccess("上传成功");
                    that.loading = false;
                });
            },
            // 上传预处理
            beforeImgUpload(file) {
                if (file.type.indexOf("image/") == -1) {
                    this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                } else {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        //this.options.img = reader.result;
                    };
                }
            },
            /** 查询优惠券活动列表 */
            getList() {
                this.loading = true;
                listActivity(this.queryParams).then(response => {
                    this.activityList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    title: null,
                    description: null,
                    beginDate: null,
                    endDate: null,
                    joinTimes: null,
                    actityTypeId: null,
                    laterSend: null,
                    imgUrl: null,
                    status: 1,
                    videoUrl: null,
                    merchantId: null,
                    couponId: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加优惠券活动";
                this.getMerchantList();
                //进度条切换到第一步
                this.active = 1;
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                this.getMerchantList();
                this.getCouponList();
                //进度条切换到第一步
                this.active = 1;
                const id = row.id || this.ids
                getActivity(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改优惠券活动";
                    //给话题赋值
                    if (this.form.douyinTitle != null && this.form.douyinTitle != '') {
                        //先置空
                        this.douyinTitles = [];
                        var titles = this.form.douyinTitle.split(" ");
                        for (var i = 0; i < titles.length; i++) {
                            var title = titles[i].substring(1);
                            if (title.trim() != "") {
                                this.douyinTitles.push({
                                    value: title,
                                    key: Date.now()
                                });
                            }
                        }
                        //选择视频资源分组
                        this.selectVideo(this.form.videoSource);
                        //选中之前选择的资源分组
                        console.log(this.form.resourceGroupId);
                        if (this.form.resourceGroupId != null && this.form.resourceGroupId != '') {
                            this.form.resourceGroupIds = this.form.resourceGroupId.split(",").map(Number);
                        }
                    }
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        var douyinTitle = "";
                        for (var i = 0; i < this.douyinTitles.length; i++) {
                            douyinTitle = "#" + this.douyinTitles[i].value + " " + douyinTitle;
                        }
                        this.form.douyinTitle = douyinTitle;
                        //设置为抽奖活动
                        this.form.actityType = '0';
                        if (this.form.id != null) {
                            updateActivity(this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addActivity(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                                this.$refs.stepBtn.$el.innerText = '下一步';
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除优惠券活动编号为"' + ids + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delActivity(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有优惠券活动数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return exportActivity(queryParams);
                }).then(response => {
                    this.download(response.msg);
                })
            },
            beforeUploadVideo(file) {
                let isRightSize = file.size / 1024 / 1024 < 10
                if (!isRightSize) {
                    this.$message.error('文件大小超过 10MB')
                }
                let isAccept = new RegExp('video/*').test(file.type)
                if (!isAccept) {
                    this.$message.error('应该选择video/*类型的文件')
                }
                return isRightSize && isAccept
            },
            uploadVideoProcess(event, file, fileList) {
                this.videoFlag = true;
                this.videoUploadPercent = file.percentage.toFixed(0);
            },
            handleVideoSuccess(res, file) {                               //获取上传图片地址
                this.videoFlag = false;
                this.videoUploadPercent = 0;
                alert(res);
                console.log(res);
                console.log(file);
                if (res.status == 200) {
                    this.form.videoUrl = res.data.imgUrl;
                } else {
                    this.$message.error('视频上传失败，请重新上传！');
                }
            },
            /** 下架按钮操作 */
            handleOffline(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认下线活动?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return offlineActivity(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("下线成功");
                })
            },
            handleOnline(row) {
                const ids = row.id || this.ids;
                this.$confirm('上线后用户将要真实参与，是否确认上线活动?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return onlineActivity(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("上线成功");
                })
            },
            showActivityQrcode(row) {
                var activityId = row.id;
                var merchantId = row.merchantId;
                getConfigKey("activity_url").then(response => {
                    var authUrl = response.msg;
                    authUrl = encodeURI(authUrl + "?activityId=" + activityId + "&merchantId=" + merchantId);
                    this.loading = false;
                    this.activityQrcodeDialogVisible = true;
                    this.$nextTick(function () {
                        document.getElementById("activityQrcode").innerHTML = "";
                        let qrcode = new QRCode("activityQrcode", {
                            width: 400,
                            height: 400,
                            type: "image/png", //生成的二维码类型
                            quality: 0.3, //二维码质量
                            text: authUrl,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: 3
                        });
                    });
                });
            },
        }
    };
</script>
